<!--
 * @Author: xu xuejia
 * @Date: 2021-12-07 14:58:46
 * @LastEditors: Haiting Zhao
 * @LastEditTime: 2021-12-19 13:18:27
 * @Description: 成果审核项目详情页面
 * @FilePath: \Management-of-Scientific-Research-in-Universities-Front\src\views\projectexam\ArticleDetail.vue
-->
<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ name:'WorkPlace' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目审核</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>成果审核</el-breadcrumb-item> -->
      <el-breadcrumb-item v-if="type ==='paperType'" :to="{ name: 'ArticleExam' }">论文成果审核</el-breadcrumb-item>
      <el-breadcrumb-item v-if="type ==='patentRange'" :to="{ name: 'PatentExam' }">专利成果审核</el-breadcrumb-item>
      <el-breadcrumb-item v-if="type ==='awardedType'" :to="{ name: 'RewardExam' }">获奖成果审核</el-breadcrumb-item>
      <el-breadcrumb-item>成果详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!--返回按钮区-->
    <el-button style="margin-bottom: 20px" type="primary" round icon="el-icon-arrow-left" @click="back">返回</el-button>
    <!--logo项目名区-->
    <el-row :gutter="12">
      <el-col :span="3" class="colstyle">
        <img :src="projectInfo.projectExamineVo.fileMap.logo" alt="" width="90" height="90">
      </el-col>
      <el-col :span="12" class="Titletext">{{ projectInfo.projectExamineVo.projectName }}</el-col>
      <el-col :span="12" class="Titletext">
        <el-tag v-if="departmentlist.length!=0" style="margin-right: 10px">{{ departmentlist[projectInfo.projectExamineVo.departmentId].name }}</el-tag>
        <el-tag v-if="type === 'paperType'" type="success">{{ projectInfo.periodicalId }}</el-tag>
        <el-tag v-if="type === 'patentRange'" type="success">{{ projectInfo.prId }}</el-tag>
        <el-tag v-if="type === 'awardedType'" type="success">{{ projectInfo.levelId }}</el-tag>
      </el-col>
    </el-row>
    <!--项目信息表-->
    <div class="block">
      <div class="pjcard">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <i class="el-icon-s-management" />
            <span>项目信息</span>
          </div>
          <div class="text item">
            <span class="stitle">项目详细信息</span>
            <el-row>
              <el-col v-if="levellist.length!=0" :span="4">项目级别：{{ levellist[projectInfo.projectExamineVo.levelId].name }}</el-col>
              <el-col v-if="naturelist.length!=0" :span="5">项目性质：{{ naturelist[projectInfo.projectExamineVo.natureId].name }}</el-col>
              <el-col v-if="atlist.length!=0" :span="4">成果形式：{{ atlist[projectInfo.projectExamineVo.atId].name }}</el-col>
              <el-col v-if="departmentlist.length!=0" :span="4">成果所属：{{ departmentlist[projectInfo.projectExamineVo.aodId].name }}</el-col>
              <el-col v-if="ctlist.length!=0" :span="4">结题形式：{{ ctlist[projectInfo.projectExamineVo.ctId].name }}</el-col>
            </el-row>
          </div>
          <div class="text item">
            <el-row>
              <el-col v-if="departmentlist.length!=0" :span="4">所在单位：{{ departmentlist[projectInfo.projectExamineVo.departmentId].name }}</el-col>
              <el-col :span="5">计划时间：{{ getdata(projectInfo.projectExamineVo.planTime) }}</el-col>
              <el-col :span="4">项目经费：{{ projectInfo.projectExamineVo.outlay }}</el-col>
              <el-col v-if="sclist.length!=0" :span="4">学科门类：{{ sclist[projectInfo.projectExamineVo.scId].name }}</el-col>
              <el-col v-if="subjectlist.length!=0" :span="4">一级学科：{{ subjectlist[projectInfo.projectExamineVo.subjectId].name }}</el-col>
            </el-row>
            <!-- <el-row>
              <el-col :span="4">项目级别：{{ getlevelName(projectInfo.projectExamineVo.levelId) }}</el-col>
              <el-col :span="5">项目性质：{{ getnatureName(projectInfo.projectExamineVo.natureId) }}</el-col>
              <el-col :span="4">成果形式：{{ getatName(projectInfo.projectExamineVo.atId) }}</el-col>
              <el-col :span="4">成果所属：{{ getdepartmentName(projectInfo.projectExamineVo.aodId) }}</el-col>
              <el-col :span="4">结题形式：{{ getctName(projectInfo.projectExamineVo.ctId) }}</el-col>
            </el-row>
          </div>
          <div class="text item">
            <el-row>
              <el-col :span="4">所在单位：{{ getdepartmentName(projectInfo.projectExamineVo.departmentId) }}</el-col>
              <el-col :span="5">计划时间：{{ getdata(projectInfo.projectExamineVo.planTime) }}</el-col>
              <el-col :span="4">项目经费：{{ projectInfo.projectExamineVo.outlay }}</el-col>
              <el-col :span="4">学科门类：{{ getscName(projectInfo.projectExamineVo.scId) }}</el-col>
              <el-col :span="4">一级学科：{{ getsubjectName(projectInfo.projectExamineVo.subjectId) }}</el-col>
            </el-row> -->
          </div>
          <div class="text item" style="margin-top:px">
            <div><span class="stitle">项目概述</span></div>
            {{ projectInfo.projectExamineVo.introduction }}
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <i class="el-icon-s-custom" />
            <span>团队信息</span>
          </div>
          <div class="text item">
            <div><span class="stitle">团队成员</span></div>
            <!-- 团队成员：<span v-for="(item, index) in projectInfo.projectExamineVo.team" :key="index">{{ item.userRealname + ' ' }}</span> -->
            <el-table :data="projectInfo.projectExamineVo.team" style="width: 100%">
              <el-table-column prop="userRealname" label="成员姓名" width="180" />
              <el-table-column prop="userNumber" label="成员学号" width="180" />
              <el-table-column prop="username" label="成员昵称" width="180" />
              <el-table-column prop="userMobile" label="成员电话" width="180" />
              <el-table-column prop="userEmail" label="成员邮箱" width="180" />
            </el-table>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <i class="el-icon-s-flag" />
            <span>成果证明</span>
          </div>
          <div v-for="(item, index) in urlKey" :key="index" class="text item">
            <a v-if="item !== 'logo'" :href="filearr[index]" download="附件.jpeg" target="_blank">{{ item }}</a>
            <el-button v-if="item !== 'logo'" v-preventReClick="3000" type="primary" style="margin-left:20px" size="mini" @click="downRow(filearr[index],urlKey[index])">下载</el-button></div>
          <!-- <div v-for="(item, index) in urlKey" :key="index" class="text item">
            <a v-if="item !== 'logo'" :href="filearr[index]" download="附件.jpeg" target="_blank">{{ item }}</a>
            <el-button v-if="item !== 'logo'" type="primary" size="mini" class="Dbutton" @click="DownloadDocument(filearr[index])">下载</el-button>
          </div> -->
        </el-card>
        <!-- 评定角色对话框 -->
        <el-dialog title="评定等级" :visible.sync="setDialogVisible" width="30%" @close="setDialogClosed">
          <div>
            <p>
              请评定成果等级：
              <el-select
                v-if="type ==='paperType'"
                v-model="selectLevelId"
                filterable
                allow-create
                default-first-option
                placeholder="请评定成果等级："
              >
                <el-option
                  v-for="item in levelList"
                  :key="item.id"
                  :label="item.ptName"
                  :value="item.ptId"
                />
              </el-select>
              <!-- select框变化 -->
              <el-select
                v-if="type ==='patentRange'"
                v-model="selectLevelId"
                filterable
                allow-create
                default-first-option
                placeholder="请评定成果等级："
              >
                <el-option
                  v-for="item in levelList"
                  :key="item.id"
                  :label="item.prName"
                  :value="item.prId"
                />
              </el-select>
              <el-select
                v-if="type ==='awardedType'"
                v-model="selectLevelId"
                filterable
                allow-create
                default-first-option
                placeholder="请评定成果等级："
              >
                <el-option
                  v-for="item in levelList"
                  :key="item.id"
                  :label="item.levelName"
                  :value="item.levelId"
                />
              </el-select>
            </p>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="setDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveLevel">确 定</el-button>
          </span>
        </el-dialog>
        <!--通过不通过按钮-->
        <div style="text-align: right;margin-top:30px;margin-bottom:20px;margin-right:80px;">
          <el-button v-if="projectInfo.examineStatus === '审核通过'" type="info" round>成果已审核</el-button>
          <el-button v-else type="primary" @click="showSetLevel">审核</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: 'Articledetail',
  data() {
    return {
      projectInfo: this.$route.params.projectInfo,
      levelList: [],
      setDialogVisible: false,
      selectLevelId: '',
      type: '', // 对话框下拉框等级
      applyType: '', // 点击确定申请的接口类型
      departmentlist: [],
      levellist: [],
      patentRangelist: [],
      periodicallist: [],
      atlist: [],
      ctlist: [],
      naturelist: [],
      sclist: [],
      subjectlist: [],
      filearr: [],
      urlKey: [],
      peIdParam: ''
    }
  },
  created() {
    this.projectInfo = JSON.parse(sessionStorage.getItem('projectInfo'))
    this.getUser()
    this.getlevelList()
  },
  mounted() {
    // this.getdepartmentlist()
    this.getalldictonary()
    // this.getList()
    for (const i in this.projectInfo.projectExamineVo.fileMap) {
      this.filearr.push(this.projectInfo.projectExamineVo.fileMap[i])
    }
    this.urlKey = Object.keys(this.projectInfo.projectExamineVo.fileMap)
  },
  methods: {
    setDialogClosed() {
      this.selectLevelId = ''
    },
    back() {
      this.$router.go(-1)
    },
    /**
     * @description: 等级评定
     * @param {*}
     * @return {*}
     * @author: xu xuejia
     */
    // 等级评定
    saveLevel() {
      // console.log('this.projectInfo.peId', this.projectInfo.peId)
      if (!this.selectLevelId) {
        return this.$message.error('请选择等级！')
      }
      axios.get(`achievement/approved/${this.applyType}`, { params: { peId: this.peIdParam, reviewerId: this.userId, levelId: this.selectLevelId }})
        .then((res) => {
          if (res.data.code !== 200) {
            return this.$message.error('审核失败！')
          } else {
            this.$router.go(-1)
            return this.$message.success('审核成功！')
          }
        })
      this.setDialogClosed = false
    },
    // 对话框可见性
    showSetLevel() {
      this.setDialogVisible = true
    },
    /**
     * @description: 获取等级
     * @param {*}
     * @return {*}
     * @author: xu xuejia
     */
    // 获取等级
    getlevelList() {
      if (window.sessionStorage.getItem('activePath') === '/ZcKexscrA9rhZlvKh1Z1wA==') {
        this.type = 'awardedType'
        this.applyType = 'awarded'
        this.peIdParam = this.projectInfo.aeId
        axios.get('dictionary/searchAll/level')
          .then((response) => {
            this.levelList = response.data.data
          }).catch(error => {
            console.log(error)
          })
      } else if (window.sessionStorage.getItem('activePath') === '/8qkiObfSws6yAlAxpB9k0A==') {
        this.type = 'paperType'
        this.applyType = 'paper'
        this.peIdParam = this.projectInfo.peId
      } else if (window.sessionStorage.getItem('activePath') === '/XGKWvypkU5OP3nzacw1aRw==') {
        this.type = 'patentRange'
        this.applyType = 'patent'
        this.peIdParam = this.projectInfo.peId
      }
      axios.get(`dictionary/searchAll/${this.type}`)
        .then((response) => {
          this.levelList = response.data.data
        }).catch(error => {
          console.log(error)
        })
    },
    /**
     * @description: 文件下载
     * @param {*}
     * @return {*}
     * @author: xu xuejia
     */
    // 文件下载
    downRow(url, urlname) {
      // const that = this
      const oReq = new XMLHttpRequest()
      oReq.open('GET', url, true)
      oReq.responseType = 'blob'
      // oReq.withCredentials = true;//如果跨域
      oReq.onload = function(oEvent) {
        const content = oReq.response
        const elink = document.createElement('a')
        // var str = url
        // if (str.indexOf('png') !== -1 || str.indexOf('jpg') !== -1) {
        //   elink.download = '项目附件.png'
        // } else elink.download = urlname
        elink.download = urlname
        elink.style.display = 'none'
        const blob = new Blob([content])
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        document.body.removeChild(elink)
      }
      oReq.send()
    },
    /**
     * @description: 转换时间
     * @param {*}
     * @return {*}
     * @author: xu xuejia
     */
    // 转时间
    getdata(data) {
      var date = new Date(data)
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
      var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
      return Y + M + D + h + m + s
    },
    /**
     * @description: 获取当前用户作为评定人
     * @param {*}
     * @return {*}
     * @author: xu xuejia
     */
    // 获取当前用户
    getUser() {
      axios.get('/user/')
        .then((response) => {
          this.userId = response.data.data.userId
        }).catch(error => {
          console.log(error)
        })
    },
    // 转单位id
    getdepartmentlist() {
      axios.get('dictionary/searchAll/department').then((response) => {
        this.departmentlist = response.data.data
      }).catch(error => {
        console.log(error)
      })
    },
    /**
     * @description: 转各种id
     * @param {*}
     * @return {*}
     * @author: xu xuejia
     */
    // 转各种id
    getalldictonary() {
      this.levellist = JSON.parse(this.$store.getters.getlevel)
      this.naturelist = JSON.parse(this.$store.getters.getnature)
      this.atlist = JSON.parse(this.$store.getters.getat)
      this.departmentlist = JSON.parse(this.$store.getters.getdepartment)
      this.ctlist = JSON.parse(this.$store.getters.getct)
      this.sclist = JSON.parse(this.$store.getters.getsc)
      this.subjectlist = JSON.parse(this.$store.getters.getsubject)
    },
    // getList() {
    //   axios.get('dictionary/searchAll/periodical').then((response) => {
    //     this.periodicallist = response.data.data
    //   }).catch(error => {
    //     console.log(error)
    //   })
    //   axios.get('dictionary/searchAll/level').then((response) => {
    //     this.levellist = response.data.data
    //   }).catch(error => {
    //     console.log(error)
    //   })
    //   axios.get('dictionary/searchAll/patentRange').then((response) => {
    //     this.patentRangelist = response.data.data
    //   }).catch(error => {
    //     console.log(error)
    //   })
    //   axios.get('dictionary/searchAll/nature').then((response) => {
    //     this.naturelist = response.data.data
    //   }).catch(error => {
    //     console.log(error)
    //   })
    //   axios.get('dictionary/searchAll/achievementType').then((response) => {
    //     this.atlist = response.data.data
    //   }).catch(error => {
    //     console.log(error)
    //   })
    //   axios.get('dictionary/searchAll/conclusionType').then((response) => {
    //     this.ctlist = response.data.data
    //   }).catch(error => {
    //     console.log(error)
    //   })
    //   axios.get('dictionary/searchAll/subjectCategory').then((response) => {
    //     this.sclist = response.data.data
    //   }).catch(error => {
    //     console.log(error)
    //   })
    //   axios.get('dictionary/searchAll/subject').then((response) => {
    //     this.subjectlist = response.data.data
    //   }).catch(error => {
    //     console.log(error)
    //   })
    // },
    getlevelName(data) {
      for (let i = 0; i < this.levellist.length; i++) {
        if (this.levellist[i].levelId === data) {
          return this.levellist[i].levelName
        }
      }
    },
    getatName(data) {
      for (let i = 0; i < this.atlist.length; i++) {
        if (this.atlist[i].atId === data) {
          return this.atlist[i].atName
        }
      }
    },
    getctName(data) {
      for (let i = 0; i < this.ctlist.length; i++) {
        if (this.ctlist[i].ctId === data) {
          return this.ctlist[i].ctName
        }
      }
    },
    getnatureName(data) {
      for (let i = 0; i < this.naturelist.length; i++) {
        if (this.naturelist[i].natureId === data) {
          return this.naturelist[i].natureName
        }
      }
    },
    getscName(data) {
      for (let i = 0; i < this.sclist.length; i++) {
        if (this.sclist[i].scId === data) {
          return this.sclist[i].scName
        }
      }
    },
    getsubjectName(data) {
      for (let i = 0; i < this.subjectlist.length; i++) {
        if (this.subjectlist[i].subjectId === data) {
          return this.subjectlist[i].subjectName
        }
      }
    },
    getdepartmentName(data) {
      for (let i = 0; i < this.departmentlist.length; i++) {
        if (this.departmentlist[i].departmentId === data) {
          return this.departmentlist[i].departmentName
        }
      }
    },
    getperiodicalName(data) {
      for (let i = 0; i < this.periodicallist.length; i++) {
        if (this.periodicallist[i].periodicaltId === data) {
          return this.periodicallist[i].periodicalName
        }
      }
    },
    getprName(data) {
      for (let i = 0; i < this.patentRangelist.length; i++) {
        if (this.patentRangelist[i].prId === data) {
          return this.patentRangelist[i].prName
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.Titletext{
  font-size: 20px;
  color: rgb(12, 5, 5);
  font-weight:bold;
}
.colstyle{
   vertical-align: middle;
}
.clearfix{
  font-size:15px;
  color:black;
  font-weight:bold;
}
 .text {
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 30px;
  }

  .item {
    margin-bottom: 5px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    border-left:5px solid tomato;
  }
  .block {
    background-color: whitesmoke;
    height:100%;
    padding-bottom:20px;
    border-top:50px solid transparent;
  }
   .stitle {
  position: relative;
  padding-left: 13px;
  margin: 24px 0;
  font-weight: bold;
  line-height: 30px;
}
.stitle:before {
  content: "";
  background-color: tomato;
  width: 4px;
  height: 14px;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -8px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.pjcard {
  border-top:1px solid transparent;
  margin-top: 20px;
  margin-bottom:30px;
}
/* .Dbutton {
  margin-right: 10px;
  border-right:10px solid transparent;
} */
</style>
